<template>
    <div class="page">
        <div class="content" ref="echarts"></div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            echarts: null
        }
    },
    methods: {
        // 检测屏幕宽度
        screen() {
            // 检测echarts宽度
            this.echarts.resize();
            // 获取可视宽度
            let width = this.$refs.echarts.offsetWidth;
            // console.log(width);
            // 设置标题大小
            let num = (width / 100) * 5;
            let options = {
                title: {
                    textStyle: {
                        fontSize: num
                    }
                }
            }
            // console.log(num);
            // 重新绘制图标
            this.echarts.setOption(options);
        },
        // echarts初始化
        initEcharts() {
            let echarts = this.$refs.echarts;
            this.echarts = this.$echarts.init(echarts,this.themeStatus);
        },
        // 请求数据
        async getData() {
            let harvestData = await this.$axios('/plantingHarvest');
            console.log(harvestData);
            let month = harvestData.data.map(item => {
                return item.month
            })
            let harvest = harvestData.data.map(item => {
                return item.harvest
            })
            this.setOptions(month, harvest)

        },
        // 绘制图标
        setOptions(month, harvest) {
            let options = {
                title: {
                    text: '全国种植每月收成情况',
                    left: 20,
                    top: 20
                },
                label: {
                    show: true,
                    position: 'top'
                },
                xAxis: {
                    data: month
                },
                yAxis: {
                    // data:[]
                },
                grid: {
                    left: '15%',
                    // top:"10%"
                },
                series: [{
                    type: 'bar',
                    data: harvest,
                    itemStyle: {
                        borderRadius: [50, 50, 0, 0],
                        // 指明颜色渐变的方向
                        color: this.$echarts.graphic.LinearGradient(1, 0, 0, 1, [
                            {
                                offset: 1,
                                color: '#103559'
                            },
                            {
                                offset: 0,
                                color: '#37C0E6'
                            }
                        ])

                    }
                }]
            }
            this.echarts.setOption(options)
        }
    },
    mounted() {
        this.initEcharts();
        this.getData();
        window.addEventListener('resize', this.screen)
        this.screen()
    },
    watch: {
        // 监听切换主题
        themeStatus() {
            // 销毁之前的实例
            this.echarts.dispose();
            this.initEcharts();
            this.getData()
            this.screen();
        }
    },
    computed: {
        themeStatus() {
            return this.$store.state.theme
        }
    },
    filters: {},
    components: {},
}
</script>
<style scoped></style>